/*MENU---------------------------*/

/*Intro screen*/

#introScreen{
	background-image: url(../images/map/IntroScreen.png);
	position: absolute;
	height: 700px;
	width: 960px;
	top:0px;
	left:0px;
}

.introButton{
	box-shadow: 0px 0px 6px 3px black;
	cursor: pointer;
	border-radius: 10px;
	font-size: 1.6em;
	font-family: boston;
	padding: 10px;
	text-align: center;
	background: linear-gradient(#cb2727, #7c0d0d 65%,#966464 95%);
	width: 20%;
	margin:30px;
	margin-left: 40%;
	margin-right: 40%;
}

.introButton:hover{
	color:#333;
	background: linear-gradient(#ffd600, #ffb400 65%,#b89030 95%);
}

.introButton:active{
	color:#ccc;
	background: linear-gradient(#4b0707, #7c0d0d 50%,#cb2727 100%);
}

.introButton:nth-of-type(1){
	margin-top: 250px;
}

/*Map*/

.mainMap{
	background-image: url(../images/map/WorldMapMinified.png);
	width: 960px;
	height: 700px;
	position: absolute;
	top:0px;
	left:0px;
}

.area0{
	position: absolute;
	top:180px;
	left:40px;
	width: 300px;
	height: 396px;
}

.area0.colored{
	background-image:url(../images/map/AreaOneColored.png);
}

.area0.greyscale{
	background-image:url(../images/map/AreaOneGreyscale.png);
}

.area1{
	position: absolute;
	top:60px;
	left:240px;
	width: 427px;
	height: 204px;

}

.area1.colored{
	background-image:url(../images/map/AreaTwoColored.png);
}

.area1.greyscale{
	background-image:url(../images/map/AreaTwoGreyscale.png);
}

.area2{
	position: absolute;
	top:260px;
	left:600px;
	width: 293px;
	height: 384px;
}

.area2.colored{
	background-image:url(../images/map/AreaThreeColored.png);
}

.area2.greyscale{
	background-image:url(../images/map/AreaThreeGreyscale.png);
}

.missionMarker{
	cursor:pointer;
	position: absolute;
	height: 77px;
	width: 70px;
	
}

.Star-1{
	background-image:url(../images/map/MissionMarkerUnplayed.png);
}

.Star0{
	background-image:url(../images/map/MissionMarkerEmpty.png);
}

.Star1{
	background-image:url(../images/map/MissionMarkerOne.png);
}

.Star2{
	background-image:url(../images/map/MissionMarkerTwo.png);
}

.Star3{
	background-image:url(../images/map/MissionMarkerThree.png);
}

/*Mission marker positions. Do not change*/
.a0m0{
	top:160px;
	left:60px;
}

.a0m1{
	top:250px;
	left:180px;
}

.a0m2{
	top:410px;
	left:140px;
}

.a1m0{
	top:45px;
	left:290px;
}

.a1m1{
	top:120px;
	left:420px;
}

.a1m2{
	top:60px;
	left:530px;
}

.a2m0{
	top:220px;
	left:700px;
}

.a2m1{
	top:440px;
	left:600px;
}

.a2m2{
	top:460px;
	left:730px;
}

/*Shared window style*/

.gameWindow{
	border-radius: 20px;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#43494b), to(#2e3335));
	background: -webkit-linear-gradient(#43494b, #2e3335);
	background: -moz-linear-gradient(#43494b, #2e3335);
	background: -o-linear-gradient(#43494b, #2e3335);
	background: linear-gradient(#43494b, #2e3335);
	border:4px outset #505658;
}

/*Mission prompt*/

#GamePromptScreen{
	top:0px;
	position: relative;
	width: 960px;
	height: 700px;
	background: rgba(0,0,0,0.5);
	z-index: 10;
}

#GamePrompt{
	position: relative;
	top:150px;
	margin:auto;
	width: 400px;
	height: 380px;
}

#closePrompt{
	right:15px;
	top:10px;
	position: absolute;
	border: 2px solid white;
	font-size: 1.6em;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	border-radius: 30px;
	background: #da3939;
	height: 40px;
	width: 40px;
}

#closePrompt:hover{
	background: #3e0d08;
	font-size: 2em;
}

.promptText{
	font-family: sans-serif;
	margin-top:20px;
	margin-left:20px;
	border-radius: 10px;
	padding: 10px;
	background: rgba(0,0,0,0.5);
	width: 300px
}

#ContentBox{
	font-size: 1.2em;
	font-family: sans-serif;
	margin-top:20px;
	margin-left:20px;
	border-radius: 10px;
	padding: 10px;
	background: rgba(0,0,0,0.5);
	width: 300px
}

.promptStar{
	display: inline-block;
	background-image: url(../images/map/promptStar.png);
	height: 50px;
	width: 50px;
}

.promptTitle{
	font-family: boston;
	border-radius: 0px;
	border-bottom: 4px solid #2d2d2d;
	background: none;
	text-shadow: 5px 5px 0px rgba(0, 0, 0, 0.8);
	font-size: 3em;
}

.secDesc{
	margin-left: 25px;
	list-style-image:url(../images/map/starMini.png) 
}


.deployButton{
	cursor: pointer;
	box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 1);
	margin-left: 140px;
	margin-top: 25px;
	border-radius: 5px;
	display: inline-block;
	padding: 5px;
	font-family: boston;
	font-size: 1.5em;
	background: #56c929;
	border:4px outset #71e145;
}

.deployButton:hover{
	background: #f9ce25;
	border:4px outset #ffda4d;
}

.deployButton:active{
	background: #31562c;
	border:4px inset #46873f;
}

/*Loadout*/

.loadoutButton{
	text-align: center;
	vertical-align: middle;
	line-height: 40px;
	border: 2px solid #402110;
	border-radius: 10px;
	cursor: pointer;
	width: 120px;
	height: 40px;
	background: linear-gradient(#b46a25,#89441e);
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
	font-size: 1.5em;
	font-family: boston;
	position: absolute;
	bottom:20px;
	left: 30px;
}

.loadoutButton:hover{
	background: linear-gradient(#da8333,#b25f32);
}

.loadoutButton:active{
	background: linear-gradient(#89441e,#b46a25);
	font-size: 1.4em;
	color:rgb(200,200,200);
}

.loadoutScreen{
	position: relative;
	border-radius: 20px;
	top:100px;
	margin:auto;
	width: 400px;
	height: 500px;
}

.skillBox{
	margin:3% 10% 3% 8%;
	-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.4);
	box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.4);
	height: 180px;
	width: 80%;
}

.loadoutScreen .skillIcon{
	border-radius: 3px;
	border:2px solid rgb(30,30,30);
	margin: 5px 0px 0px 5px;
}

.skillIcon{
	display: inline-block;
	height: 50px;
	width: 50px;
}

.loadoutScreen .skillIcon:hover{
	border:2px solid #ffcb2f;
}

.currentSkillBox{
	top:10px;
	margin:auto;
	position: relative;
	width: 250px;
	height: 75px;
	border-radius: 10px;
	background: linear-gradient(#a55e2f, #7c4f32);
	border:4px outset #b66937;

}

.skillDescription{
	font-size: 1.1em;
	width: 220px;
	display: inline-block;
	margin-left: 20px;
}

/*Other*/

.errorMessage{
	z-index: 250;
	border:4px solid #8f3434;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	padding: 5px;
	position: absolute;
	width: 300px;
	height: 50px;
	background: #d83b3b;
	border-radius: 15px;
	top:300px;
	left:330px;
}

.descriptionBox{
	color:#aaa;
	z-index: 200;
	font-size:1.1em;
	padding: 10px;
	border-radius: 10px;
	width: 200px;
	height: 150px;
	position: absolute;
	top:250px;
	right:20px;

}

.descriptionBox:first-line{
	color:white;
	font-size:1.6em;
	text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.8);
}


@media screen and (max-height: 700px){
	.loadoutButton{
		bottom:40px;
	}
}